<template>
  <div class="inpatient-cure-page">
    <section class="layer">
      <div class="box">
        <div class="box-header">
          <span class="box-title">查询条件</span>
        </div>
        <div class="box-body">
          <el-form ref="searchForm" :model="searchForm">
            <el-row :gutter="12">
              <el-col :md="24" :lg="12" :xl="12">
                <el-form-item label="就诊类型" label-width="100px" prop="visitsType">
                  <el-select v-model="searchForm.visitsType" multiple clearable placeholder="请选择" style="width:100%;">
                    <el-option
                      v-for="item in visitsOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="24" :lg="12" :xl="12">
                <el-form-item label="人员类型" label-width="100px" prop="personnelType">
                  <el-select v-model="searchForm.personnelType" multiple clearable placeholder="请选择" style="width:100%;">
                    <el-option
                      v-for="item in personnelOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="24" :lg="12" :xl="12">
                <el-form-item label="二级人员类型" label-width="100px" prop="secPersonnelType">
                  <el-select v-model="searchForm.secPersonnelType" clearable placeholder="请选择" style="width:100%;" @change="changeSecType">
                    <el-option
                      v-for="item in secPersonnelOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="24" :lg="12" :xl="12">
                <el-form-item label="三级人员类型" label-width="100px" prop="thirdPersonnelType">
                  <el-select v-model="searchForm.thirdPersonnelType" multiple clearable placeholder="请选择" style="width:100%;" @focus="selectThirdType">
                    <el-option
                      v-for="item in thirdPersonnelOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="24" :lg="12" :xl="12">
                <el-form-item label="年龄段" label-width="100px" prop="ageGroup">
                  <el-select v-model="searchForm.ageGroup" multiple clearable placeholder="请选择" style="width:100%;">
                    <el-option
                      v-for="item in ageGroupOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="24" :lg="12" :xl="12">
                <el-form-item label="医疗机构级别" label-width="100px" prop="organizationLevel">
                  <el-select v-model="searchForm.organizationLevel" multiple clearable placeholder="请选择" style="width:100%;">
                    <el-option
                      v-for="item in organizationLevelOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="24" :lg="24" :xl="24">
                <el-form-item label="指标" label-width="100px" prop="target">
                  <el-select v-model="searchForm.target" multiple clearable placeholder="请选择" style="width:100%;">
                    <el-option
                      v-for="item in targetOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="24" :lg="16" :xl="16">
                <el-form-item label="费用时间" label-width="120px" prop="priceTime">
                  <price-time ref="priceTime" :show-default-date="true" :show-btn-select="true" @change="priceTimeChange" />
                </el-form-item>
              </el-col>
              <el-col :md="8" :lg="8" :xl="8" align="right">
                <el-form-item>
                  <el-button @click="resetCondition">重置</el-button>
                  <el-button type="primary" @click="search">查询</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </section>
    <section class="layer">
      <div class="box">
        <div class="box-header">
          <span class="box-title">指标详情</span>
        </div>
        <div class="box-body">
          <DynamicTable :table-data="tableData" :table-header="tableHeader" />
        </div>
      </div>
    </section>
    <section class="layer">
      <div v-if="costComposition.length > 0" class="box">
        <div class="box-header">
          <span class="box-title">医疗费用各部分构成</span>
        </div>
        <div class="box-body">
          <RingChart chart-id="costComposition" :data-ring="costComposition" height="400px" val-title="费用(万元)" />
        </div>
      </div>
    </section>
    <section class="layer">
      <el-row :gutter="12">
        <el-col v-if="topChartMedical.length > 0" :md="16" :lg="12" :xl="12">
          <div class="box">
            <div class="box-header">
              <span class="box-title">使用频率TOP10药品</span>
            </div>
            <div class="box-body">
              <LineChart chart-id="medicalTop10" :data-bar="topChartMedical" height="400px" title-x="使用频率" title-y="药品" />
            </div>
          </div>
        </el-col>
        <el-col v-if="topChartMedicalPrice.length > 0" :md="16" :lg="12" :xl="12">
          <div class="box">
            <div class="box-header">
              <span class="box-title">药品金额TOP10</span>
            </div>
            <div class="box-body">
              <LineChart chart-id="medicalPriceTop10" :data-bar="topChartMedicalPrice" height="400px" title-x="金额" title-y="药品" />
            </div>
          </div>
        </el-col>
      </el-row>
    </section>
    <section class="layer">
      <el-row :gutter="12">
        <el-col v-if="topChartProject.length > 0" :md="16" :lg="12" :xl="12">
          <div class="box">
            <div class="box-header">
              <span class="box-title">使用频率TOP10诊疗项目</span>
            </div>
            <div class="box-body">
              <LineChart chart-id="projectTop10" :data-bar="topChartProject" height="400px" title-x="使用频率" title-y="诊疗项目" />
            </div>
          </div>
        </el-col>
        <el-col v-if="topChartProjectPrice.length > 0" :md="16" :lg="12" :xl="12">
          <div class="box">
            <div class="box-header">
              <span class="box-title">诊疗项目金额TOP10</span>
            </div>
            <div class="box-body">
              <LineChart chart-id="projectPriceTop10" :data-bar="topChartProjectPrice" height="400px" title-x="金额" title-y="诊疗项目" />
            </div>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>
<script>
import PriceTime from '../components/PriceTime'
import LineChart from '@/components/Echarts/LineChart'
import RingChart from '@/components/Echarts/RingChart'
import DynamicTable from '@/components/DynamicTable/index'
import { mapGetters } from 'vuex'
import { getMedicalCost, getTopChartData } from '@/api/assist-decision/mentorInpatientCureAnalyze'
export default {
  mixin: [],
  components: {
    PriceTime,
    LineChart,
    RingChart,
    DynamicTable
  },
  props: {},
  data() {
    return {
      searchForm: {
        beginDate: '',
        endDate: '',
        visitsType: [],
        personnelType: [],
        secPersonnelType: '',
        thirdPersonnelType: [],
        ageGroup: [],
        organizationLevel: [],
        target: []
      },
      isFirstEnter: true,
      targetOptions: [
        {
          value: '1',
          label: '就医人数'
        }, {
          value: '2',
          label: '就医人次'
        }, {
          value: '3',
          label: '人次人头比'
        }, {
          value: '4',
          label: '总费用'
        }, {
          value: '5',
          label: '记账医疗费'
        }, {
          value: '6',
          label: '就诊率'
        }, {
          value: '7',
          label: '就诊频次'
        }, {
          value: '8',
          label: '疾病发生率'
        }, {
          value: '9',
          label: '人均年度费用'
        }, {
          value: '10',
          label: '次均总费用'
        }, {
          value: '11',
          label: '次均记账费用'
        }, {
          value: '12',
          label: '基金支付比例'
        }
      ],
      thirdPersonnelOptions: [],
      costComposition: [],
      topChartMedical: [],
      topChartMedicalPrice: [],
      topChartProject: [],
      topChartProjectPrice: [],
      tableData: [
        {
          col1: '省直',
          col2: '参保',
          col3: '在职',
          col4: '就医人数val1',
          col5: '就医次数val',
          col6: '人次人头比val',
          col7: '总费用 val',
          col8: '记账医疗费用val',
          col9: '就诊率val',
          col10: '就诊频次val',
          col11: '疾病发生率val',
          col12: '人均年度费用val',
          col13: '次均总费用val',
          col14: '次均记账费用val',
          col15: '基金支付比例val'
        },
        {
          col1: '省直',
          col2: '参保',
          col3: '在职',
          col4: '就医人数val2',
          col5: '就医次数val',
          col6: '人次人头比val',
          col7: '总费用 val',
          col8: '记账医疗费用val',
          col9: '就诊率val',
          col10: '就诊频次val',
          col11: '疾病发生率val',
          col12: '人均年度费用val',
          col13: '次均总费用val',
          col14: '次均记账费用val',
          col15: '基金支付比例val'
        },
        {
          col1: '省直',
          col2: '参保',
          col3: '家属',
          col4: '就医人数val3',
          col5: '就医次数val',
          col6: '人次人头比val',
          col7: '总费用 val',
          col8: '记账医疗费用val',
          col9: '就诊率val',
          col10: '就诊频次val',
          col11: '疾病发生率val',
          col12: '人均年度费用val',
          col13: '次均总费用val',
          col14: '次均记账费用val',
          col15: '基金支付比例val'
        },
        {
          col1: '省直',
          col2: '特定',
          col3: '特定',
          col4: '就医人数val',
          col5: '就医次数val',
          col6: '人次人头比val',
          col7: '总费用 val',
          col8: '记账医疗费用val',
          col9: '就诊率val',
          col10: '就诊频次val',
          col11: '疾病发生率val',
          col12: '人均年度费用val',
          col13: '次均总费用val',
          col14: '次均记账费用val',
          col15: '基金支付比例val'
        },
        {
          col1: '省直',
          col2: '特定',
          col3: '特定',
          col4: '就医人数val',
          col5: '就医次数val',
          col6: '人次人头比val',
          col7: '总费用 val',
          col8: '记账医疗费用val',
          col9: '就诊率val',
          col10: '就诊频次val',
          col11: '疾病发生率val',
          col12: '人均年度费用val',
          col13: '次均总费用val',
          col14: '次均记账费用val',
          col15: '基金支付比例val'
        },
        {
          col1: '委托',
          col2: '参保',
          col3: '在职',
          col4: '就医人数val',
          col5: '就医次数val',
          col6: '人次人头比val',
          col7: '总费用 val',
          col8: '记账医疗费用val',
          col9: '就诊率val',
          col10: '就诊频次val',
          col11: '疾病发生率val',
          col12: '人均年度费用val',
          col13: '次均总费用val',
          col14: '次均记账费用val',
          col15: '基金支付比例val'
        },
        {
          col1: '委托',
          col2: '参保',
          col3: '在职',
          col4: '就医人数val',
          col5: '就医次数val',
          col6: '人次人头比val',
          col7: '总费用 val',
          col8: '记账医疗费用val',
          col9: '就诊率val',
          col10: '就诊频次val',
          col11: '疾病发生率val',
          col12: '人均年度费用val',
          col13: '次均总费用val',
          col14: '次均记账费用val',
          col15: '基金支付比例val'
        },
        {
          col1: '委托',
          col2: '参保',
          col3: '家属',
          col4: '就医人数val',
          col5: '就医次数val',
          col6: '人次人头比val',
          col7: '总费用 val',
          col8: '记账医疗费用val',
          col9: '就诊率val',
          col10: '就诊频次val',
          col11: '疾病发生率val',
          col12: '人均年度费用val',
          col13: '次均总费用val',
          col14: '次均记账费用val',
          col15: '基金支付比例val'
        },
        {
          col1: '委托',
          col2: '特定',
          col3: '家属',
          col4: '就医人数val',
          col5: '就医次数val',
          col6: '人次人头比val',
          col7: '总费用 val',
          col8: '记账医疗费用val',
          col9: '就诊率val',
          col10: '就诊频次val',
          col11: '疾病发生率val',
          col12: '人均年度费用val',
          col13: '次均总费用val',
          col14: '次均记账费用val',
          col15: '基金支付比例val'
        },
        {
          col1: '委托',
          col2: '特定',
          col3: '家属',
          col4: '就医人数val',
          col5: '就医次数val',
          col6: '人次人头比val',
          col7: '总费用 val',
          col8: '记账医疗费用val',
          col9: '就诊率val',
          col10: '就诊频次val',
          col11: '疾病发生率val',
          col12: '人均年度费用val',
          col13: '次均总费用val',
          col14: '次均记账费用val',
          col15: '基金支付比例val'
        },
        {
          col1: '委托',
          col2: '特定',
          col3: '特定',
          col4: '就医人数val',
          col5: '就医次数val',
          col6: '人次人头比val',
          col7: '总费用 val',
          col8: '记账医疗费用val',
          col9: '就诊率val',
          col10: '就诊频次val',
          col11: '疾病发生率val',
          col12: '人均年度费用val',
          col13: '次均总费用val',
          col14: '次均记账费用val',
          col15: '基金支付比例val'
        },
        {
          col1: '委托',
          col2: '特定',
          col3: '特定',
          col4: '就医人数val',
          col5: '就医次数val',
          col6: '人次人头比val',
          col7: '总费用 val',
          col8: '记账医疗费用val',
          col9: '就诊率val',
          col10: '就诊频次val',
          col11: '疾病发生率val',
          col12: '人均年度费用val',
          col13: '次均总费用val',
          col14: '次均记账费用val',
          col15: '基金支付比例val'
        }
      ],
      tableHeader: [
        {
          label: '人员类型',
          value: 'col1'
        },
        {
          label: '二级人员类型',
          value: 'col2'
        },
        {
          label: '三级人员类型',
          value: 'col3'
        },
        {
          label: '就医人数',
          value: 'col4'
        },
        {
          label: '就医次数',
          value: 'col5'
        },
        {
          label: '人次人头比',
          value: 'col6'
        },
        {
          label: '总费用',
          value: 'col7'
        },
        {
          label: '记账医疗费用',
          value: 'col8'
        },
        {
          label: '就诊率',
          value: 'col9'
        },
        {
          label: '就诊频次',
          value: 'col10'
        },
        {
          label: '疾病发生率',
          value: 'col11'
        },
        {
          label: '人均年度费用',
          value: 'col12'
        },
        {
          label: '次均总费用',
          value: 'col13'
        },
        {
          label: '次均记账费用',
          value: 'col14'
        },
        {
          label: '基金支付比例',
          value: 'col15'
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['selectMaps']),
    visitsOptions() {
      const result = this.selectMaps && this.selectMaps.MDTRT_TYPE || []
      const options = []
      result.forEach(item => {
        options.push({ label: item.dictValue, value: item.dictCode })
      })
      return options
    },
    personnelOptions() {
      const result = this.selectMaps && this.selectMaps.EMP_TYPE || []
      const options = []
      result.forEach(item => {
        options.push({ label: item.dictValue, value: item.dictCode })
      })
      return options
    },
    ageGroupOptions() {
      const result = this.selectMaps && this.selectMaps.AGE || []
      const options = []
      result.forEach(item => {
        options.push({ label: item.dictValue, value: item.dictCode })
      })
      return options
    },
    secPersonnelOptions() {
      const result = this.selectMaps && this.selectMaps.SCD_PSN_TYPE || []
      const options = []
      result.forEach(item => {
        options.push({ label: item.dictValue, value: item.dictCode })
      })
      return options
    },
    organizationLevelOptions() {
      const result = this.selectMaps && this.selectMaps.MEDINS_LV || []
      const options = []
      result.forEach(item => {
        options.push({ label: item.dictValue, value: item.dictCode })
      })
      return options
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    getMedicalCost(params) {
      getMedicalCost(params).then(res => {
        const result = res.data
        if (result) {
          // 查字典，找出id对应的名称
          const medicalType = this.selectMaps && this.selectMaps.MED_ITEM_TYPE || []
          const newMedicalType = []
          medicalType.forEach(item => {
            newMedicalType.push({ code: item.dictCode, name: item.dictValue })
          })

          const arr = []
          result.forEach(item => {
            newMedicalType.forEach(val => {
              if (val.code === item.med_item_type) {
                arr.push({ name: val.name, value: item.sumfee })
              }
            })
          })
          this.costComposition = arr
        }
      })
    },
    getTopChartData(params) {
      getTopChartData(params).then(res => {
        const result = res.data
        if (result) {
          this.topChartMedical = result.chart1 && this.handleChartData(result.chart1)
          this.topChartMedicalPrice = result.chart2 && this.handleChartData(result.chart2)
          this.topChartProject = result.chart3 && this.handleChartData(result.chart3)
          this.topChartProjectPrice = result.chart4 && this.handleChartData(result.chart4)
        }
      })
    },
    handleChartData(chartData) {
      if (!chartData || chartData.length === 0) {
        return []
      }
      const result = []
      chartData.forEach(item => {
        result.push({ name: item.med_item_name, value: item.value })
      })
      return result.reverse()
    },
    resetCondition() {
      this.$refs.priceTime.reset() // 子组件重置
      this.$refs.searchForm.resetFields()
    },
    search() {
      const params = {
        age: 1,
        beginDate: 20200301,
        endDate: 20200304,
        index: '1,2,3,4,5',
        lv3PsnType: 1,
        mdtrtType: 1,
        medinsLv: 1,
        psnType: 1,
        scdPsnType: 1
      }
      this.getMedicalCost(params)
      this.getTopChartData(params)
    },
    handleCrowd(val) {
      console.log(val)
    },
    handleTreatment(val) {
      console.log(val)
    },
    priceTimeChange(val) {
      this.searchForm.beginDate = val[0] || null
      this.searchForm.endDate = val[1] || null
    },
    changeSecType() {
      this.getThirdTypeData()
    },
    selectThirdType() {
      this.isFirstEnter && this.getThirdTypeData()
      this.isFirstEnter = false
    },
    getThirdTypeData() {
      const result = this.selectMaps && this.selectMaps.LV3_PSN_TYPE || []
      const options = []
      // 选参保
      this.searchForm.secPersonnelType === '1' && result.forEach(item => {
        if (item.dictCode !== '4') {
          options.push({ label: item.dictValue, value: item.dictCode })
        }
      })
      // 选特定
      this.searchForm.secPersonnelType === '2' && result.forEach(item => {
        if (item.dictCode === '4') {
          options.push({ label: item.dictValue, value: item.dictCode })
        }
      })
      // 选全部
      this.searchForm.secPersonnelType === '' && result.forEach(item => {
        options.push({ label: item.dictValue, value: item.dictCode })
      })
      this.thirdPersonnelOptions = options
    }
  }
}
</script>
